<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>管理员左侧菜单</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<style>
body {
    background: #f0f9fd;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.lefttop {
    background: #2980b9;
    height: 40px;
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
}

.leftmenu {
    width: 100%;
    padding: 0;
    margin: 0;
}

.leftmenu dd {
    margin: 0;
    padding: 0;
}

.title {
    background: #3498db;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid #2980b9;
}

.menuson {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menuson li {
    border-bottom: 1px solid #e5e5e5;
}

.menuson li a {
    display: block;
    padding: 10px 15px 10px 25px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    position: relative;
}

.menuson li a:before {
    content: "•";
    position: absolute;
    left: 10px;
    color: #3498db;
}

.menuson li a:hover {
    background: #ecf0f1;
    color: #1abc9c;
}

.menuson li.active a {
    background: #ecf0f1;
    color: #1abc9c;
}
</style>
<script type="text/javascript">
$(function(){	
	//导航切换
	$(".menuson li").click(function(){
		$(".menuson li.active").removeClass("active")
		$(this).addClass("active");
	});
	
	$('.title').click(function(){
		var $ul = $(this).next('ul');
		$('dd').find('ul').slideUp();
		if($ul.is(':visible')){
			$(this).next('ul').slideUp();
		}else{
			$(this).next('ul').slideDown();
		}
	});
})	
</script>
</head>

<body>
    
    <dl class="leftmenu">
        <dd>
            <div class="title">
                系统管理
            </div>
            <ul class="menuson">
                <li class="active"><a href="admin_index.html" target="rightFrame">仪表盘</a></li>
                <li><a href="admin_profile.html" target="rightFrame">个人信息</a></li>
            </ul>    
        </dd>
        <dd>
            <div class="title">
                学生管理
            </div>
            <ul class="menuson">
                <li><a href="admin_student_list.html" target="rightFrame">学生列表</a></li>
                <li><a href="admin_student_add.html" target="rightFrame">添加学生</a></li>
            </ul>    
        </dd>
        <dd>
            <div class="title">
                学院管理
            </div>
            <ul class="menuson">
                <li><a href="admin_college_list.html" target="rightFrame">学院列表</a></li>
                <li><a href="admin_college_add.html" target="rightFrame">添加学院</a></li>
            </ul>    
        </dd>
    </dl>
</body>
</html> 